<template>
  <div class="overhaul-workList">
    <el-tabs v-model="tabActive" type="card" @tab-click="tabClick">
      <!-- 专业 -->
      <template v-for="(item,index) in formData">
        <el-tab-pane :label="item.majorName" :key="index">
          <div class="tableConten w100">
            <div class="itemTitle">作业表单：</div>
            <div class="tebleDiv">
              <div class="tebleDiv-top">
                <el-collapse
                  v-model="item.collapseActive"
                  accordion
                  @change="(val)=>handleChange(val,item)"
                >
                  <!-- 专业下表单 -->
                  <template v-for="(formItem,formIndex) in item.forms">
                    <el-collapse-item :key="formIndex" :name="formIndex">
                      <template slot="title">
                        <div class="collapseTitle">
                          <span class="collapseLeft">
                            <span class="lable">表单名{{formIndex+1}}：</span>
                            <span class="formName" @click.stop>
                              <el-input
                                v-model="formItem.name"
                                placeholder="请输入表单名"
                                v-if="!disabled"
                              ></el-input>
                              <span v-else>{{formItem.name}}</span>
                            </span>
                            <span class="lable">{{formItem.code}}</span>
                          </span>
                          <span class="collapseRight">
                            <el-button
                              class="moveBtn el-button el-button--primary el-button--mini"
                              size="mini"
                              v-if="!disabled"
                              @click.stop="removeItem(formItem,formIndex,index)"
                            >移除</el-button>
                            <el-button
                              v-if="formIndex!=0 && !disabled"
                              class="moveBtn el-button el-button--primary el-button--mini"
                              size="mini"
                              icon="el-icon-top"
                              title="上移"
                              @click.stop="moveItem(formItem,formIndex,index,'up')"
                            ></el-button>
                            <el-button
                              v-if="formIndex < item.forms.length-1 && !disabled"
                              class="moveBtn el-button el-button--primary el-button--mini"
                              size="mini"
                              icon="el-icon-bottom"
                              @click.stop="moveItem(formItem,formIndex,index,'down')"
                              title="下移"
                            ></el-button>
                          </span>
                        </div>
                      </template>
                      <editTableNew
                        :tableSetting="workListDetails"
                        :tableData="formItem.overhaulReadies"
                        :hideBtn="disabled"
                        :ref="'workListTable_'+index+'_'+formIndex"
                      ></editTableNew>
                      <div class="tableConten">
                        <span class="redPoint">*</span>
                        <div class="itemTitle">作业步骤层级:</div>
                        <div class="tebleDiv">
                          <el-select
                            v-model="formItem.stepLevel"
                            :disabled="disabled"
                            @change="(val)=>stepChange(val,index,formIndex)"
                            placeholder="请选择"
                          >
                            <el-option
                              v-for="item in stepOptions"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                            ></el-option>
                          </el-select>
                        </div>
                      </div>

                      <workListTable
                        style="margin-top: 20px"
                        :data="formItem.itemDTOs"
                        :isEditTable="isEditTable"
                        isShowEdit
                        :hideBtn="disabled"
                        :stepLevel="formItem.stepLevel"
                        :formStandard="formStandard"
                        :ref="'workProcessTable_'+index+'_'+formIndex"
                      />
                    </el-collapse-item>
                  </template>
                </el-collapse>
              </div>
              <div class="tebleDiv-bottom">
                <el-button
                  class="el-button el-button--primary el-button--mini"
                  size="mini"
                  v-if="!disabled"
                  @click="addWorlkForm(index)"
                  icon="el-icon-plus"
                >添加作业表单</el-button>
              </div>
            </div>
          </div>
          <workInstruction
            :ref="'instruction_'+index"
            :disabled="disabled"
            orderType="overhaul"
            :formData="item"
            :workBookList="item.instructions"
          ></workInstruction>
        </el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>
<script>
import workListTable from "./workListTable.vue";
import workListItem from "./workListItem";
import editTableExpand from "../editTableExpand";
import { getAttachList } from "@/api/common";
import workInstruction from "../publicModule/workInstructionYC"; /* 作业指导书 */

export default {
  props: {
    formData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    //是否可编辑
    disabled: {
      type: Boolean,
      default: false
    },
    //数据是否来着标准
    formStandard: {
      type: Boolean,
      default: false
    },
    status: {
      type: String,
      default: null
    },
    pageType: {
      type: String,
      default: ""
    }
  },
  components: { workListTable, workInstruction },
  watch: {
    formData: {
      handler(val) {
        this.currentMajor = this.formData[0];
      },
      deep: true
    },
    status: {
      handler(val) {
        if (val == "DRAFT" || val == null) {
          this.isEditTable = true;
        } else {
          this.isEditTable = false;
        }
      }
    }
  },
  data() {
    return {
      tabActive: "0",
      formTitle: "", //新增作业表单的名称
      tableConfig: {
        tableData: []
      },
      stepOptions: [
        { label: "一层", value: 1 },
        { label: "两层", value: 2 }
      ],
      currentMajor: {}, //当前专业
      isEditTable: true,
      hideBtn: false,
      workListData: [],
      /* 作业表单-作业准备 */
      workListDetails: {
        btnArr: ["add"],
        column: [
          {
            label: "类别",
            textAlign: "center",
            type: "text",
            prop: "type",
            required: true
          },
          {
            label: "名称",
            textAlign: "center",
            prop: "tools",
            type: "textarea",
            autosize: true,
            required: true
          }
        ],
        title: "作业准备:",
        data: [],
        select: false,
        maxHeight: "100%",
        buttonArr: [
          {
            name: "删除",
            isShow: row => {
              return true;
            },
            methods: (row, index) => {
              this.deletRow(row, index);
            }
          }
        ],
        data: [],
        column: [
          {
            label: "类别",
            textAlign: "center",
            type: "text",
            prop: "type",
            required: true,
            maxlength: 64
          },
          {
            label: "名称",
            textAlign: "center",
            prop: "tools",
            type: "textarea",
            autosize: true,
            required: true
          }
        ]
      }
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {},
    //获取各作业表单的作业准备数据
    async getWorkListData(index, formIndex) {
      let workListData = await this.$refs[
        "workListTable_" + index + "_" + formIndex
      ][0].getTableData();
      return workListData;
    },
    //获取各作业表单的作业过程数据
    async getworkProcessData(index, formIndex) {
      let workProcessData = [];
      workProcessData = await this.$refs[
        "workProcessTable_" + index + "_" + formIndex
      ][0].getTableData();
      return workProcessData;
    },
    //获取各专业的表单数据
    async getFormData(data, index, formIndex) {
      data.overhaulReadies =
        (await this.getWorkListData(index, formIndex)) || [];
      data.itemDTOs = (await this.getworkProcessData(index, formIndex)) || [];
      //判断数据是否来自大修标准，若是则去掉ID
      if (this.formStandard) {
        delete data.id;
      }
      if (data.itemDTOs.length == 0 || data.name == "") {
        let msg = "作业表单名不能为空！";
        if (data.name && data.itemDTOs.length == 0) {
          msg = "表单：" + data.name + "-作业过程不能为空!";
        }
        this.$message.warning(msg);
        data.isPass = false;
      } else {
        data.isPass = true;
      }
      return data;
    },
    //获取各专业的数据
    async getMajorData(data, index) {
      let isPass = true;
      let formArr = [];
      for (let i = 0; i < data.forms.length; i++) {
        let formData = await this.getFormData(data.forms[i], index, i);
        formArr.push(formData);
        if (!formData.isPass) {
          isPass = false;
        }
      }
      data.instructions = await this.getBookListData(index); //作业指导书
      data.forms = formArr;
      data.isPass = isPass; //是否可以提交
      return data;
    },
    //获取整个作业表单的数据
    async getAllWorkListData() {
      let isPass = true;
      let allArr = [];
      for (let i = 0; i < this.formData.length; i++) {
        let data = await this.getMajorData(this.formData[i], i);
        allArr.push(data);
        if (!data.isPass) {
          isPass = false;
        }
      }
      allArr.isPass = isPass; //是否可以提交
      return allArr;
    },
    //获取作业指导书数据
    getBookListData(index) {
      let data = this.$refs["instruction_" + index][0].getInstructionData();
      return data;
    },

    //删除表格的数据
    async deletRow(row, num) {
      let { collapseActive: formIndex, index } = this.currentMajor;
      let listArr = [];
      //获取当前作业准备的表格信息，不进行校验
      let workListData = await this.$refs[
        "workListTable_" + index + "_" + formIndex
      ][0].getTableData(false);
      workListData.map((i, index) => {
        if (index != num) {
          i.editable = true;
          listArr.push(i);
        }
      });
      this.$refs["workListTable_" + index + "_" + formIndex][0].setTableData(
        listArr
      );
    },
    /* 添加作业表单 */
    addWorlkForm(index) {
      //获取一遍所有表单的值
      let data = this.formData[index].forms;
      let form = {
        majorId: "",
        name: "",
        overhaulId: this.formData.id, //工单id
        sort: data.length + 1,
        index: data.length,
        itemDTOs: [],
        overhaulReadies: []
      };
      data.push(form);
    },
    //作业层级数修改
    stepChange(val, index, formIndex) {
      let children =
        this.formData[index].forms[formIndex].itemDTOs[0].children || [];
      let itemDTOs = this.formData[index].forms[formIndex].itemDTOs;
      if (
        (children.length > 0 && val == 2) ||
        (children.length == 0 && val == 1)
      ) {
      } else {
        this.formData[index].forms[formIndex].itemDTOs = [];
      }
    },
    /* 移除 */
    removeItem(item, num, index) {
      //获取一遍所有表单的值，对这个值进行遍历
      let arr = [];
      let data = this.formData[index].forms;
      data.map((i, index) => {
        if (index != num) {
          arr.push(i);
        }
      });
      this.formData[index].forms = arr;
    },
    /* 上下移动 */
    moveItem(item, num, index, type) {
      //获取一遍所有表单的值，对这个值进行遍历
      let data = this.formData[index].forms;
      let arr = [];
      let onForm = {};
      let last = type == "up" ? num : num + 1; //要交换的两条数据的后一条数据的位置
      data.map((i, index) => {
        if (index == last - 1) {
          //跟接下来的那一条数据交换位置
          i.sort++;
          onForm = i;
        } else if (index == last) {
          i.sort--;
          arr.push(i);
          arr.push(onForm);
        } else {
          arr.push(i);
        }
      });
      this.formData[index].forms = arr;
    },
    getmajorName(val) {
      return this.$store.getters["fineDirtDataName"]("common_major", val);
    },
    showBookList(item) {
      let bookList = item.instructions || [];
      return bookList.length > 0;
    },
    handleChange(val, item) {
      this.currentMajor = item;
    },
    //tab页的切换
    tabClick(tab, event) {
      this.currentMajor = this.formData[this.tabActive];
    }
  }
};
</script>
<style lang="less" >
.overhaul-workList {
  .el-collapse-item__header:before {
    background-color: rgba(255, 255, 255, 0);
  }
  .el-collapse-item__header.is-active {
    border-bottom: 1px solid @kr-border-sub-color;
  }
  .el-collapse-item__header {
    width: 100%;
    // border-bottom: 1px solid @kr-border-sub-color;
    // border-radius: @kr-border-radius;
    background-color: rgba(255, 255, 255, 0);
    height: 40px;
    line-height: 40px;
    font-weight: normal;
  }
  .el-collapse-item__content {
    padding: 0px 10px;
  }
  .el-collapse-item + .el-collapse-item {
    // border-top: none;
    margin-top: 10px;
  }
  .el-collapse-item {
    border: 1px solid @kr-border-sub-color;
    border-radius: 5px;
  }

  .el-collapse-item__header .el-icon-arrow-right {
    display: none;
  }
  .collapseLeft {
    position: absolute;
    display: flex;
    flex-flow: wrap nowrap;
    left: 10px;
  }
  .collapseRight {
    position: absolute;
    right: 10px;
  }
  .collapseTitle {
    width: 100%;
    height: 40px;
    position: relative;
  }
  .tableConten {
    display: flex;
    flex-flow: wrap nowrap;
    margin-top: 10px;
    .redPoint {
      color: red;
    }
    .itemTitle {
      width: 120px;
    }
    .tebleDiv {
      width: 100%;
      text-align: left;
      .tebleDiv {
        width: calc(100% - 120px);
      }
    }
    .tebleDiv-bottom {
      margin-top: 10px;
    }
    .el-select .el-input__inner {
      line-height: 30px;
      height: 30px;
    }
    .el-input__icon {
      line-height: 30px;
      height: 30px;
    }
  }
  .bookContent {
    width: 400px;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    padding: 10px;
    margin-top: 10px;
  }
  .line {
    height: 30px;
    width: 100%;
    border: 1px dashed #ebebeb;
    padding: 0px 10px;
    display: flex;
    flex-flow: wrap nowrap;
    justify-content: space-between;
  }
  .line + .line {
    margin-top: 10px;
  }
}
.formName {
  margin-right: 25px;
  .el-input__inner {
    border: none;
    height: 35px;
    line-height: 35px;
    padding: 0px 5px;
  }
}
</style>